<!--方向盘-->
<template>
    <div id="steering-wheel" class="steering-wheel" @mousedown="startDrag" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="stopDrag"  >
        <div id="steering-wheel-center" class="steering-wheel-center" :style="{ transform: `rotate(${rotateDeg}deg)` }">
            <div v-for="(button, index) in buttons" :key="index" class="steering-button" :style="{ transform: `rotate(${(index * (360 / buttons.length)) - 90}deg) translate(130px)` }" @click="handleClick(index)">
                {{ button.label }}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "SteeringWheel",
    data() {
        return {
            rotateDeg: 0, // 方向盘旋转角度
            startX: 0, // 鼠标按下时的X坐标
            startY: 0, // 鼠标按下时的Y坐标
            dragging: false, // 是否正在拖动
            buttons: [
                { label: '1' },
                { label: '2' },
                { label: '3' },
                { label: '4' },
                { label: '5' },
            ]
        };
    },
    methods: {
        handleClick(index) {
            console.log(`Button ${index + 1} clicked!`);
        },
        /**
         * 鼠标按下时触发
         * @param e
         */
        startDrag(e) {

            this.dragging = true;
            this.startX = e.clientX;
            this.startY = e.clientY;
        },
        /**
         * 鼠标拖动时触发
         * @param e
         */
        drag(e) {
            if (!this.dragging) return;
            // 计算鼠标移动的弧度
            // Math.PI 圆周率
            // Math.atan2(y, x) 计算点与x轴之间的弧度
            const angleRad = Math.atan2(this.startX , this.startY) - Math.atan2(e.clientX, e.clientY);
            this.rotateDeg = (this.rotateDeg + (angleRad * (180 / Math.PI))) % 360; // 转换为角度并限制在0-360之间
            // 更新鼠标位置用于下一次计算
            this.startX = e.clientX;
            this.startY = e.clientY;
        },
        /**
         * 鼠标松开时触发
         */
        stopDrag() {
            this.dragging = false;
        },
        handleTouchStart(e) {
            this.dragging = true;
            // 获取第一个触摸点的位置
            this.startX = e.touches[0].clientX;
            this.startY = e.touches[0].clientY;
        },
        handleTouchMove(e) {
            if (!this.dragging) return;
            // 计算鼠标移动的弧度
            const angleRad = Math.atan2(this.startX , this.startY) - Math.atan2(e.touches[0].clientX, e.touches[0].clientY);
            this.rotateDeg = (this.rotateDeg + (angleRad * (180 / Math.PI))) % 360; // 转换为角度并限制在0-360之间
            // 更新鼠标位置用于下一次计算
            this.startX = e.touches[0].clientX;
            this.startY = e.touches[0].clientY;
        },
    },
    mounted() {
        // 绑定全局的mousemove和mouseup事件
        window.addEventListener('mousemove', this.drag);
        window.addEventListener('mouseup', this.stopDrag);
    },
    beforeUnmount() {
        // 组件销毁前移除事件监听
        window.removeEventListener('mousemove', this.drag);
        window.removeEventListener('mouseup', this.stopDrag);
    },
}
</script>

<style scoped>
.steering-wheel {
    /*!* 其他样式 *!*/
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto auto;
    cursor: grab;
    touch-action: none; /* 禁用默认触摸行为 */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard syntax */
}

.steering-wheel-center {
    /*!* 其他样式 *!*/
    position: absolute;
    top: 50px;
    left: 0;
    width: 200px;
    height: 200px;
    border: 5px solid #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* 隐藏超出方向盘的按钮部分 */
    /*overflow: hidden;*/
    /*transition: transform 0.1s ease-in-out; !* 添加过渡效果，使旋转更平滑 *!*/
}
.steering-button {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #000;
    cursor: pointer;
    /* 初始位置，为了隐藏所有按钮直到旋转 */
    transform: rotate(0deg) translate(200px);
    transition: transform 0.3s ease;
}
</style>
